import React, { useState, useEffect } from "react";
import Taro from "@tarojs/taro";
import { View, Image } from "@tarojs/components";
import _ from "lodash";

import api from "@api/api.js";
import "./index.less";

export default (props) => {
  const [list, setList] = useState([]); // 科室列表
  const [id, setId] = useState(""); // 选中的科室
  useEffect(() => {
    getList();
  }, []);

  // 获取科室列表
  const getList = async () => {
    const { data } = await api.getClinic();
    setList(data);
  };

  // 选择科室
  const select = (id) => {
    setId(id);
  };

  // 下一步
  const save = async () => {
    Taro.navigateTo({
      url: `/pages/select-operation/index?id=${id}&type=case`,
    });
  };
  return (
    <View className="bgBox">
      <View className="listBox">
        {list.map((item) => {
          return (
            <View
              onClick={() => {
                select(item.id);
              }}
              className={"depItem " + (id == item.id ? "active" : "")}
            >
              <Image src={api.bseUrl + item.icon} />
              <View className="depName">{item.name}</View>
              {id == item.id && <View className="iconfont icon-dui"></View>}
            </View>
          );
        })}
      </View>
      <View className="bottomBtn" onClick={save}>
        <View>下一步</View>
      </View>
    </View>
  );
};
